<template>
  <div class="panel1">
    <div class="box1">
      <div class="title-text">生成机构</div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="生成机构" name="team" v-loading="expertGroupLoading">
        <div v-if="groupList == null" class="team">
          <div>暂无专家组</div>
          <el-button type="primary" icon="el-icon-plus" @click="addTeam()"
            >生成专家组</el-button
          >
        </div>
        <div v-else>
          <div class="expertGroupBox">
            <div class="groupItem">
              <div>名称：</div>
              <div>{{ groupList.name }}</div>
            </div>
            <div class="groupItem">
              <div>负责事件：</div>
              <div>{{ groupList.accidentName }}</div>
            </div>
            <div class="groupItem">
              <div>组长：</div>
              <div>{{ groupList.president }}</div>
            </div>
            <div class="groupItem">
              <div>成员：</div>
              <div>{{ groupList.experts }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="应急专家" name="expert" v-loading="expertLoading">
        <div class="tab-panel">
          <div class="panel-item">
            <div v-for="item in displayExpertList" :key="item.id" class="item">
              <div>{{ item.name }}</div>
              <el-tag :type="dict[item.type].type">{{
                dict[item.type].text
              }}</el-tag>
              <el-tag :type="item.status == 2 ? 'success' : 'danger'">{{
                item.status == 1 ? "已分配" : "未分配"
              }}</el-tag>
              <div>{{ item.phone }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 创建专家组的遮罩 -->
    <el-dialog
      title="创建专家组"
      :visible.sync="dialogVisible"
      width="40%"
      :append-to-body="true"
      @open="initExpertPanel()"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-loading="formLoading"
        element-loading-text="加载中"
      >
        <el-form-item label="专家组名称" label-width="100px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="负责事件" label-width="100px">
          <el-select v-model="form.accident" placeholder="请选择事件">
            <el-option
              v-for="item in accidentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专家组长" label-width="100px">
          <el-select v-model="form.president" placeholder="请选择专家组长">
            <el-option
              v-for="item in expertList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专家组成员" label-width="100px">
          <el-select
            v-for="(item, index) in form.experts"
            :key="index"
            v-model="item.expertId"
            placeholder="请选择专家组成员"
          >
            <el-option
              v-for="expert in expertList"
              :key="expert.id"
              :label="expert.name"
              :value="expert.id"
            ></el-option>
          </el-select>
          <el-button type="text" icon="el-icon-plus" @click="addExpert"
            >添加</el-button
          >
          <el-button type="text" icon="el-icon-delete" @click="removeExpert"
            >删除</el-button
          >
        </el-form-item>
        <el-form-item style="margin-left: 400px">
          <el-button type="primary" @click="onSubmit" :loading="submitLoading"
            >立即创建</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listExpert } from "@/api/resourcemanagement/expert";
import {
  createExpertGroup,
  submitExpertGroup,
  listExpertGroupVo,
} from "@/api/accidenthandle/panel1";
export default {
  name: "panel1",
  data() {
    return {
      activeName: "team",
      expertGroupName: "",
      groupList: null,
      dialogVisible: false,
      expertLoading: false, //专家页面加载控制
      formLoading: false,
      accidentList: [
        { id: 1, name: "accident1" },
        { id: 2, name: "accident2" },
        { id: 3, name: "accident3" },
      ],
      expertList: [], //供选择的专家列表
      displayExpertList: [],
      form: {
        name: "",
        accident: "",
        president: "",
        experts: [],
      },
      dict: [
        { type: "primary", text: "应急管理" },
        { type: "success", text: "自然灾害类" },
        { type: "danger", text: "事故灾害类" },
        { type: "warning", text: "公共卫生类" },
        { type: "info", text: "综合类" },
      ],
      //提交时的Loading控制
      submitLoading: false,
      expertGroupLoading: false,
    };
  },
  methods: {
    //初始化创建专家组的面板
    initExpertPanel() {
      this.formLoading = true;
      //初始化变量
      this.getExpert();
      this.createExpertGroup();
    },
    //自动获取创建专家组信息并覆盖当前信息
    createExpertGroup() {
      this.form = {
        name: "",
        accident: "",
        president: "",
        experts: [],
      };
      createExpertGroup(this.$store.state.accidentHandle.accindentId).then((response) => {
        //请求成功
        if (response.code == 200) {
          //先清空acciddentlist
          this.accidentList=[]
          this.form.name = response.data.name;
          //将获取到的列表插入accidentList
          this.accidentList.push({id:response.data.accidentId,name:response.data.accidentName})
          this.form.accident = response.data.accidentId;
          this.form.president = response.data.president;
          for (var item of response.data.experts) {
            var expert = {
              id: this.form.experts.length + 1,
              expertId: item,
            };
            this.form.experts.push(expert);
          }
        }
        this.formLoading = false;
        this.$message({
          message: "自动组建专家组成功",
          type: "success",
        });
      });
    },
    //获取用于选取的专家列表
    getExpert() {
      this.expertList = [];
      listExpert().then((response) => {
        for (var expert of response.rows) {
          var temp = { id: expert.id, name: expert.expertName };
          this.expertList.push(temp);
        }
      });
    },
    //生成用于展示的专家列表
    getShowExpert() {
      //显示加载狂
      this.expertLoading = true;
      //每次刷新列表
      this.displayExpertList = [];
      listExpert().then((response) => {
        if (response.rows != 0) {
          for (var expert of response.rows) {
            var temp = {
              id: expert.id,
              name: expert.expertName,
              type: expert.expertType,
              status: expert.isBusy,
              phone: expert.mobileTel,
            };
            this.displayExpertList.push(temp);
          }
          this.expertLoading = false;
        }
      });
    },
    handleClick(tab) {
      if (tab.name == "expert") {
        this.getShowExpert();
      }
      if (tab.name == "team") {
        console.log("teamteamteamteamteamteam");
        this.getExpertGroupVo(this.$store.state.accidentHandle.accindentId);
      }
    },
    //显示弹窗（对应添加按钮）
    addTeam() {
      this.dialogVisible = true;
    },
    //提交专家组表单
    onSubmit() {
      this.submitLoading = true;
      //不污染form数据，将其复制一份
      var data = this.form;
      var experts = [];
      //把expertId从对象数组中提取出来
      for (var expert of data.experts) {
        experts.push(expert.expertId);
      }
      data.experts = experts;
      data.accidentId = this.$store.state.accidentHandle.accindentId;
      console.log(data);
      submitExpertGroup(data).then((res) => {
        if (res.code == 200) {
          this.submitLoading = false;
          this.$message({
            message: "创建成功",
            type: "success",
          });
          this.dialogVisible = false;
          //重新获取专家组列表
          this.getExpertGroupVo(this.$store.state.accidentHandle.accindentId);
        } else {
          this.submitLoading = false;
          this.$message({
            message: "创建失败",
            type: "error",
          });
        }
      });
    },
    //获取专家组VO
    getExpertGroupVo(id) {
      this.groupList=null;
      this.expertGroupLoading = true;
      listExpertGroupVo(id).then((res) => {
        if (res.code == 200) {
          if(res.msg=="1"){
            console.log("error");
          }
          else{
            console.log("11111111111111111111111111111111111111111111111111");
            this.groupList = res.data;
          }
        }
        this.expertGroupLoading = false;
      });
    },
    //退出弹窗
    cancel() {
      this.dialogVisible = false;
    },
    //添加专家
    addExpert() {
      var expert = {
        id: this.form.experts.length + 1,
        expertId: "",
      };
      this.form.experts.push(expert);
    },
    removeExpert() {
      this.form.experts.pop();
    },
  },
  mounted: function () {
    this.getExpertGroupVo(this.$store.state.accidentHandle.accindentId);
  },
};
</script>
<style scoped>
.title-text {
  margin: 0 auto;
  font-weight: bold;
}
.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  /* margin-bottom: 5px; */
}
.panel1 {
  width: 350px;
  height: 320px;
  position: absolute;
  left: 10px;
  top: 100px;
  z-index: 1;
  border-radius: 4px;
  background-color: #ffffff;
  /* opacity: 0.8; */
}
.tab-panel {
  width: 350px;
  height: 200px;
  /* padding: 5px 5px 5px 5px; */
  /* background-color: pink; */
}
.team {
  width: 200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item {
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* border-bottom: #dcdfe6 1px solid; */
  margin-bottom: 3px;
}
.expertGroupBox {
  padding: 10px;
  font-size: 17px;
  /* background-color: pink; */
}
.groupItem {
  display: flex;
}
</style>
